<template>
  <div :id="this.id" style="width: 100%; height: 500px"></div>
</template>

<script>
export default {
  props: {
    // 定义接受的数据
    id: {
      type: String, //数据类型
      default: 'charts1', //class无数据时候默认为"charts1"
    },
	// pieChart: {
	// 	type:Array,
	// 	default:null
	// },
    pieData: {
      type: Array,
      default: null,
    },
    pieName: {
      type: String,
      default: null,
    },
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
      this.drawLine()
	  window.addEventListener('resize', () => {
	        this.myChart.resize()
	      })
  },
  watch: {
    pieData: {
      deep: true,
      handler() {
        this.drawLine()
      },
    },
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.pieName,
          subtext: '',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '60%',
            data: this.pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
    },
  },
}
</script>

<style scoped></style>
